<template>
  <view class="treeBox">
    <view class="tree" v-for="(item, index) in list" :key="index">
      <view class="user">
        <view class="pic">
          <image :src="item.avatar"></image>
        </view>
        <view class="info">
          <view class="nameBox">
            <text>{{item.name}}</text>
            <view class="vip" v-if="item.level_name && item.level_name != ''">
              <text class="iconfont icon-brand-fill"></text>
              <text>{{item.level_name}}</text>
            </view>
          </view>
          <text class="referrer">{{$t('share.referrer')}}/{{item.recommend_man}}</text>
        </view>
      </view>
      <view class="foot">
        <view class="order">
          {{$t('mdAdmin.order')}}<text class="red">{{item.order_count || 0}}</text> {{$t('share.consume')}}<text class="red">￥{{item.order_price || 0}}</text>
        </view>
        <view class="showBox" v-if="item.children && item.children.length > 0">
          <view class="show" v-if="!showNext(item)" @click="showMore(item)">
            <text class="iconfont">&#xe750;</text>
            <text>{{$t('shareholder.next')}}：{{item.children.length}}</text>
          </view>
          <view class="hidden" v-else @click="hiddenMore(item, index)">
            <text class="iconfont">&#xe750;</text>
            <text>{{$t('mdAdmin.back')}}：{{item.children.length}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
function getTreeItem(data, array) {
  let arr = array || []
  data.map((item) => {
    arr.push(item)
    if(item.children && item.children.length > 0) {
      getTreeItem(item.children, array);
    }else {
      return arr
    }
  });
  return arr
}
export default {
  props: {
    tree: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 所有数据
      list: [],
    };
  },
  computed: {
    showNext() {
      return (item) => {
        let flag = this.list.some((e) => {
          return e.id == item.children[0].id;
        });
        return flag;
      };
    },
  },
  methods: {
    // 初始化树形数据
    initTree() {
      this.list = [this.tree];
    },
    // 点击展开下一级
    showMore(item) {
      let children = item.children;
      let index = this.list.findIndex(e => {
        return e.id == item.id
      })
      this.list.splice(index + 1, 0, ...children)
    },
    // 点击隐藏
    hiddenMore(item, index) {
      if (index == 0) {
        this.initTree();
      } else {
        let arr = []
        var arr1 = getTreeItem(item.children,arr);
        var arr2 = this.list;
        let list = arr2.filter((items) => {
          if (!arr1.includes(items)) return items;
        });
        this.list = list
      }
    },
  },
  mounted() {
    this.initTree();
  },
};
</script>

<style lang="less" scoped>
.treeBox {
  width: 100%;
  font-family: PingFang SC;
  color: #262626;
  .tree {
    padding: 30rpx;
    border-top: 1px solid #f8f8f8;
  }
  .user {
    display: flex;
    align-items: center;
    .pic {
      width: 92rpx;
      height: 92rpx;
      border-radius: 50%;
      overflow: hidden;
      background-color: #f2f2f2;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      .nameBox {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 600;
      }
      .vip {
        display: flex;
        align-items: center;
        height: 34rpx;
        font-weight: normal;
        font-size: 20rpx;
        padding: 0 12rpx;
        margin-left: 16rpx;
        background: linear-gradient(90deg,#fef3da 0%,#fee4af 100%);
        border-radius: 99px;
      }
      .referrer {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 8rpx;
      }
    }
  }
  .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    .order {
      position: relative;
      display: flex;
      align-items: center;
      height: 56rpx;
      padding: 0 20rpx;
      background-color: #f5f5f5;
      border-radius: 99px;
      font-size: 24rpx;
      color: #8c8c8c;
      .red {
        font-size: 30rpx;
        font-weight: normal;
        color: #f0250e;
        font-weight: 600;
        margin-left: 10rpx;
      }
      .red:nth-child(1) {
        margin-right: 20rpx;
      }
      ::before {
        position: absolute;
        left: 28rpx;
        top: -8rpx;
        content: "";
        border-color: #fff #fff #f5f5f5 #fff;
        border-style: solid;
        border-width: 0rpx 14rpx 8rpx 14rpx;
        height: 0;
        width: 0;
      }
    }
    .showBox {
      view {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #f0250e;
        .iconfont {
          font-size: 40rpx;
          margin-right: 4rpx;
        }
      }
      .hidden {
        .iconfont {
          transform: rotateX(180deg);
        }
      }
    }
  }
}
</style>